<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>table 组件综合演示 - Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <div style="padding: 16px;">
        <div class="layui-card">
            <div class="layui-card-body">
                <form class="layui-form layui-row layui-col-space16">
                    <div class="layui-col-md4">
                        <div class="layui-input-wrap">
                            <div class="layui-input-prefix">
                                <i class="layui-icon layui-icon-username"></i>
                            </div>
                            <input type="text" name="A" value="" placeholder="Field A" class="layui-input"
                                lay-affix="clear">
                        </div>
                    </div>
                    <div class="layui-col-md4">
                        <div class="layui-input-wrap">
                            <input type="text" name="B" placeholder="Field B" lay-affix="clear" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-col-md4">
                        <div class="layui-input-wrap">
                            <div class="layui-input-prefix">
                                <i class="layui-icon layui-icon-date"></i>
                            </div>
                            <input type="text" name="C" readonly placeholder="Field C"
                                class="layui-input demo-table-search-date">
                        </div>
                    </div>
                    <div class="layui-btn-container layui-col-xs12">
                        <button class="layui-btn" lay-submit lay-filter="demo-table-search">搜索</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </form>
                <table class="layui-hide" id="ID-table-demo-search"></table>
            </div>
        </div>
    </div>


    <script>
        layui.use(function () {
            var table = layui.table;
            var form = layui.form;
            var laydate = layui.laydate;
            // 创建表格实例
            table.render({
                elem: '#ID-table-demo-search',
                url: 'https://unpkg.com/outeres@0.1.3/json/2/table/user.json?page=1&limit=10', // 此处为静态模拟数据，实际使用时需换成真实接口
                cols: [[
                    { type: 'radio', title: '😊', fixed: true }, // 单选框
                    { field: 'id', title: 'ID', width: 80, sort: true, fixed: true },
                    { field: 'username', title: '用户名', width: 80 },
                    { field: 'sex', title: '性别', width: 80, sort: true },
                    { field: 'city', title: '城市', width: 80 },
                    { field: 'sign', title: '签名' },
                    { field: 'experience', title: '积分', sort: true, width: 80 }
                ]],
                page: true,
                height: 310
            });
            // 日期
            laydate.render({
                elem: '.demo-table-search-date'
            });
            // 搜索提交
            form.on('submit(demo-table-search)', function (data) {
                var field = data.field; // 获得表单字段
                // 执行搜索重载
                table.reload('ID-table-demo-search', {
                    page: {
                        curr: 1 // 重新从第 1 页开始
                    },
                    where: field // 搜索的字段
                });
                layer.msg('搜索成功<br>此处为静态模拟数据，实际使用时换成真实接口即可');
                return false; // 阻止默认 form 跳转
            });
        });
    </script>

</body>

</html>